<template>
	<view class="container">
		<view>
			<uni-popup ref="popup" type="top" background-color="#fff">
				<view class="popup-content">
					
					<uni-forms ref="queryForm" :modelValue="queryParams" label-width="85px">
						<uni-forms-item label="统计类型"  v-if="type == 'reportByQY'">
							<uni-data-select v-model="queryParams.type" :localdata="tjlxOptions"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item :label="orgLabel" >
							<uni-data-picker :placeholder="orgPLa" :popup-title="orgPLa" :localdata="orgOptions" v-model="orgId"
						@nodeclick="orgChange" :map="filedName">
								
							</uni-data-picker>
						</uni-forms-item>
						<uni-forms-item label="统计时间段">
							<uni-datetime-picker v-model="queryParams.reportTime" type="daterange" @change="reportTimeChange"/>
						</uni-forms-item>
					</uni-forms>
					<view style="display: flex;">
						<button size="mini" class="common-btn other-btn" @click="handleRepeat">重置</button>
						<button size="mini" class="common-btn primary-btn" @click="handleQuery">查询</button>
					</view>
				</view>
			</uni-popup>
		</view>
		<uni-table ref="table" :loading="loading" border stripe style="overflow: auto;">
			<uni-tr>
				<uni-th width="50" align="center" v-if="type == 'reportByDepartment'">部门</uni-th>
				<uni-th width="50" align="center" v-else>区域名称</uni-th>
				<uni-th width="25" align="center" v-if="type == 'reportByDepartment'">处置数</uni-th>
				<uni-th width="25" align="center" v-else>结案数</uni-th>
				<uni-th width="25" align="center" v-if="type == 'reportByDepartment'">处置率</uni-th>
				<uni-th width="25" align="center" v-else>结案率</uni-th>
				<!-- <uni-th width="25" align="center">排名</uni-th> -->
			</uni-tr>
			<uni-tr v-for="item in tableData">
				<uni-th width="50" align="center" v-if="type == 'reportByDepartment'">{{item.org_name}}</uni-th>
				<uni-th width="25" align="center" v-else>{{item.region_name}}</uni-th>
				<uni-th width="25" align="center" v-if="type == 'reportByDepartment'">{{item.czs}}</uni-th>
				<uni-th width="25" align="center" v-else>{{item.jas}}</uni-th>
				<uni-th width="25" align="center" v-if="type == 'reportByDepartment'">{{item.czlv}}</uni-th>
				<uni-th width="25" align="center" v-else>{{item.jalv}}</uni-th>
				<!-- <uni-th width="25" align="center">{{}}</uni-th> -->
			</uni-tr>
		</uni-table>
	</view>
</template>

<script>
	import {getReportList,getOrgTreeList,getReportShowList} from "@/api/dums/caw/statReport";
	import { handleTree } from "@/utils/util.js"
	export default {
		data() {
			return {
				type:"",
				orgLabel:"区域",
				orgPLa:"请选择区域",
				orgType:"",
				loading:false,
				orgOptions:[],
				tjlxOptions:[
					{
						value:"reportByRegion",
						text:"城区评价"
					},{
						value:"reportByStreet",
						text:"街道评价"
					},{
						value:"reportByCommunity",
						text:"社区评价"
					},{
						value:"reportByUnitGrid",
						text:"网格评价"
					}
				],
				index:0,
				orgId:"",
				queryParams:{
					pageNum: 1,
					pageSize: 1000
				},
				filedName:{
					text:'label',
					value:'id'
				},
				tableData:[]
			}
		},
		onLoad(options) {
			this.type = options.type;
			this.orgType = options.orgType;
			switch (this.type){
				case "reportByDepartment":
					this.queryParams.type = this.type;
					this.orgLabel = "处置部门";
					this.orgPLa = "请选择处置部门";
					uni.setNavigationBarTitle({
						title:"部门评价"
					});
					break;
				default:
					this.type = "reportByRegion";
					this.queryParams.type = "reportByRegion";
					uni.setNavigationBarTitle({
						title:"区域评价"
					});
					break;
			}
			this.getOrgTreeData();
			
		},
		methods: {
			//获取机构树
			getOrgTreeData(){
				var setData = function(data){
					data.forEach(item => {
						item.text = item.label;
						item.value = item.id;
						if(item.children){
							setData(item.children);
						}
					});
					return data;
				}
				
				let param = {};
				param.type=this.orgType;
				getOrgTreeList(param).then(res=>{
					//console.log(JSON.stringify(res));
					if(res.code == 200){
						this.orgOptions = setData(res.data);
					}else{
						this.$modal.msgError(res.msg);
					}
				});
				
				
			},
			getList() {
				
				console.log(JSON.stringify(this.queryParams));
				if(!this.queryParams.orgId){
					this.$modal.msgError("请选择机构");
					this.loading = false;
					return;
				}
				getReportList(this.queryParams).then(res => {
					console.log(JSON.stringify(res));
					this.loading = false;
					if(res.code === 200){
					  this.tableData = res.rows;
					}
				});
			},
			orgChange(e){
				this.orgId = e.value;
				this.queryParams.orgId = e.value;
			},
			handleQuery(){
				this.loading = true;
				this.$refs.popup.close();
				this.getList();
			},
			handleRepeat(){
				this.queryParams = {
					pageNum: 1,
					pageSize: 1000,
					type:this.type
				};
				this.orgId = "";
			},
			reportTimeChange(){
				if(this.queryParams.reportTime&&this.queryParams.reportTime.length>0){
					if(this.queryParams.reportTime[0]){
						this.queryParams.startTime = this.queryParams.reportTime[0]+" 00:00:00";
					}
					if(this.queryParams.reportTime[1]){
						this.queryParams.endTime = this.queryParams.reportTime[1]+" 23:59:59";
					}
				}
			}
		},
		onNavigationBarButtonTap : function (e) {
			this.$refs.popup.open();
		},
	}
</script>

<style>
	.popup-content {
		padding: 15px;
		height: 500px;
		background-color: #fff;
	}
</style>
